<template>
	<t-modal 
        :title="title" 
        placement="right" 
        :width="750"
        :visible="visible" 
        :confirmLoading="loading" 
        destroyOnClose
        @cancel="() => { $emit('cancel') }"
    >
		<a-spin :spinning="loading">
            <div class="margin-top-xs" style="padding-bottom: 45px;">
                <a-table
                    :columns="columns"
                    :data-source="dataSource"
                    :scroll="scrollXY"
                    :pagination="false"
                >
                    <span slot="renderSerial" slot-scope="text, record, index">
                        {{ index + 1 }}
                    </span>
                    <span slot="formAction" slot-scope="text, record, index">
                        <a-tag :color="text == 'look' ? 'orange' : 'blue'">
                            {{ text == 'look' ? '不可查看' : '不可编辑' }}
                        </a-tag>
                    </span>
                    <span slot="renderAccess" slot-scope="text, record, index">
                        <a-tag :color="text == '1' ? 'green' : 'red'">
                            {{ text == '1' ? '已授权' : '未授权' }}
                        </a-tag>
                    </span>
                    <span slot="renderAction" slot-scope="text, record">
                        <a v-if="record.access != 1" @click="handleAccess(record)">授权</a>
						<a v-else class="action-delete" @click="handleAccess(record, 'cancellation')">取消授权</a>
                    </span>
                </a-table>
            </div>
		</a-spin>
		<div :style="{
				background:'rgba(255,255,255,1)',
				position: 'absolute',
				right: 0,
				bottom: 0,
				width: '100%',
				borderTop: '1px solid #e9e9e9',
				padding: '10px 16px',
				textAlign: 'right',
				zIndex: 1,
			}">
			<a-button :style="{ marginRight: '8px' }" @click="() => { $emit('cancel') }">
				关闭
			</a-button>
		</div>
	</t-modal>
</template>

<script>
	export default {
		props: {
			visible: {
				type: Boolean,
				default: () => false
			},
			loading: {
				type: Boolean,
				default: () => false
			}
		},
		data() {
			return {
                title: "表单权限",
				columns: [{
					title: "序号",
					align: "center",
					width: 55,
					langCode: "serialNo",
					scopedSlots: {
						customRender: "renderSerial",
					}
				},{
                    title: "字段名称",
                    dataIndex: "formName",

				},
                {
                    title: "字段编码",
                    dataIndex: "formCode",
				},
                {
                    title: "字段操作",
                    dataIndex: "formHandle",
                    width: 100,
                    scopedSlots: {
                        customRender: "formAction"
                    }
                },
                {
                    title: "状态",
                    dataIndex: "access",
                    width: 80,
                    scopedSlots: {
                        customRender: "renderAccess"
                    }
				},{
                    title: "操作",
                    dataIndex: "action",
                    width: 80,
                    scopedSlots: {
                        customRender: "renderAction"
                    }
				}],
				dataSource: [],
                queryParam: {},
                url: {
                    getPageSet: "/system/sysMenuForm/getListAccessFormByRoleId",
                },
			}
		},
		created() {
		
        },
        computed: {
			scrollXY() {
			  const tdHeight = this.dataSource?.length * 40 ?? 0;
			  return { y: 360, x: '100%'};
			}
		},
		methods: {
            loadData(menuId,roleId){
                this.queryParam = {
                    menuId,
                    roleId
                };
                this.getPageSet();
            },
            getPageSet(){
				this.$post(this.url.getPageSet, this.queryParam).then(res => {
					if(res.statusCode === 200){
						this.dataSource = res.data;
					}
				})
			},
            handleAccess(record, type){
                this.$post("/system/sysMenuForm/authorize",{
                    roleId: this.queryParam.roleId,
                    sysMenuFormUuid: record.uuid,
                    type: type
                }).then(res => {
                    if(res.statusCode === 200){
                        this.getPageSet();
                        this.$message.success(res.message, 1.5);
                    }else{
                        this.$message.error(res.message, 1.5);
                    }
                })
            }
		}
	}
</script>

<style lang="less" scoped>
/deep/div[class^="ant-table-wrapper"] .ant-table .ant-table-tbody tr, div[class^="ant-table-wrapper"] .ant-table .ant-table-thead tr{
    height: 40px !important;
}
/deep/.ant-table-row-cell-ellipsis, .ant-table-row-cell-ellipsis .ant-table-column-title{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/deep/.ant-table-tbody>tr>td, /deep/.ant-table-thead>tr>th{
    padding: 0 8px !important;
}
</style>
